<div class="box-container">
    <div class="main-content">
        <div class="content-body" *ngIf="tempType === '1'">
            <div class="content-top-bar">
                <div>
                    <div>
                        日期：
                        <nz-date-picker [ngModel]="today" ></nz-date-picker>
                    </div>
                    <div class="table-btn-group">
                        <button *ngIf="sectionId!='1'" nz-button nzType="primary" (click)="openInletModal()">填报</button>
                        <button *ngIf="sectionId!='1'" nz-button nzType="primary" (click)="openInletModal1()">日均流量上报</button>
                        <!--<button nz-button nzType="default" (click)="save()">暂存</button>-->
                    </div>
                </div>

                <div class="custom-btn-group">
                    <div style="margin-right: 20px">(水位： m; 流量： m³/s)</div>
                    <a class="top-bar-btn" (click)="openDetailModal()">
                        <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                    </a>
                    <a class="top-bar-btn" (click)="export()">
                        <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                    </a>
                    <!--<a class="top-bar-btn" (click)="print()">-->
                        <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                    <!--</a>-->
                </div>
            </div>

            <div class="main-column-box">
                <div class="table-wrap">
                    <nz-table
                        #editRowTable
                        class="main-table"
                        [nzData]="tableData"
                        [nzWidthConfig]="widthConfig"
                        [nzPageSize]="5"
                        nzBordered
                        nzSize="middle">
                        <thead>
                        <tr class="custom-head">
                            <th rowspan="2" style="width: 150px">名称</th>
                            <th rowspan="2" style="width: 100px;font-weight: bold;">警戒水位</th>
                            <th rowspan="2" style="width: 100px;font-weight: bold;">限定流量</th>
                            <th colspan="2">4时</th>
                            <th colspan="2">8时</th>
                            <th colspan="2">12时</th>
                            <th colspan="2">16时</th>
                            <th colspan="2">20时</th>
                            <th colspan="2">24时</th>
                            <th rowspan="2" style="width: 100px;font-weight: bold;">日均流量</th>
                        </tr>
                        <tr class="custom-head">
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of editRowTable.data;let idx = index"
                            [class]="{'even':idx % 2 === 1}"
                            (click)="selectedRow(data)"
                            class="editable-row">
                            <td>{{ data.trName }}</td>
                            <td style="color: #fe561c;">{{ data.wl }}</td>
                            <td style="color: #fe561c;">{{ data.flow }}</td>
                            <td>{{ data.wlFour }}</td>
                            <td>{{ data.flowFour }}</td>
                            <td>{{ data.wlEight }}</td>
                            <td>{{ data.flowEight }}</td>
                            <td>{{ data.wlTwelve }}</td>
                            <td>{{ data.flowTwelve }}</td>
                            <td>{{ data.wlSixteen }}</td>
                            <td>{{ data.flowSixteen }}</td>
                            <td>{{ data.wlTwenty }}</td>
                            <td>{{ data.flowTwenty }}</td>
                            <td>{{ data.wlTwentyFour }}</td>
                            <td>{{ data.flowTwentyFour }}</td>
                            <td style="color: #00adff;">{{ data.flowAvg }}</td>
                        </tr>
                        </tbody>
                    </nz-table>

                </div>
                <div class="chart-wrap">
                            <div *ngIf="hasLevelChart" class="charts-cell">
                                <div echarts [options]="basicOpts" [merge]="levelOpts"
                                     (chartInit)="levelChartInit($event)"></div>
                            </div>
                            <div *ngIf="hasFlowChart" class="charts-cell">
                                <div echarts [options]="basicOpts" [merge]="flowOpts"
                                     (chartInit)="flowChartInit($event)"></div>
                            </div>
                </div>
            </div>
        </div>
        <div class="content-body" *ngIf="tempType === '2'">
            <div class="content-top-bar">
                <div>
                    <div>
                        日期：
                        <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
                    </div>
                    <div class="table-btn-group">
                        <button nz-button nzType="primary" (click)="submit()">提交</button>
                        <button nz-button nzType="default" (click)="save()">暂存</button>
                    </div>
                </div>

                <div class="custom-btn-group">
                    <a class="top-bar-btn" (click)="openDetailModal()">
                        <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                    </a>
                    <a class="top-bar-btn" (click)="export()">
                        <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                    </a>
                </div>
            </div>

            <div class="main-column-box">
                <div class="table-wrap">
                    <nz-table
                        #editRowTable2
                        class="main-table"
                        [nzData]="tableData"
                        [nzFrontPagination]="false"
                        nzBordered
                        nzSize="middle"
                    >
                        <thead>
                        <tr class="custom-head">
                            <th style="width: 150px" rowspan="2">名称</th>
                            <th colspan="2">开机数量（台）</th>
                            <th rowspan="2">开机流量（m³/s）</th>
                        </tr>
                        <tr class="custom-head">
                            <th>（大）</th>
                            <th>（小）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of editRowTable2.data;let idx = index"
                            [class]="{'even':idx % 2 === 1}"
                            class="editable-row">
                            <td>{{ data.trName }}</td>
                            <td>
                                <div class="editable-cell" *ngIf="!editCache[data.trId].edit; else workNum">
                                    <div class="editable-cell-value-wrap" (click)="startEdit(data.trId, $event)">
                                        {{ data.workNum }}
                                    </div>
                                </div>
                                <ng-template #workNum>
                                    <input type="text" nz-input [(ngModel)]="data.workNum"/>
                                </ng-template>
                            </td>
                            <td>
                                <div class="editable-cell" *ngIf="!editCache[data.trId].edit; else workNumS">
                                    <div class="editable-cell-value-wrap" (click)="startEdit(data.trId, $event)">
                                        {{ data.workNumS }}
                                    </div>
                                </div>
                                <ng-template #workNumS>
                                    <input type="text" nz-input [(ngModel)]="data.workNumS"/>
                                </ng-template>
                            </td>
                            <td>
                                <div class="editable-cell" *ngIf="!editCache[data.trId].edit; else workFlow">
                                    <div class="editable-cell-value-wrap" (click)="startEdit(data.trId, $event)">
                                        {{ data.workFlow }}
                                    </div>
                                </div>
                                <ng-template #workFlow>
                                    <input type="text" nz-input [(ngModel)]="data.workFlow"/>
                                </ng-template>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>

                </div>
                <div class="chart-wrap">
                        <div echarts [options]="basicOpts" class="charts-cell" (chartInit)="workNumChartInit($event)"></div>
                        <div echarts [options]="basicOpts" class="charts-cell" (chartInit)="workFlowChartInit($event)"></div>
                </div>
            </div>

        </div>
    </div>
</div>
<nz-modal nzClassName="custom-modal" nzWidth="75%" [nzTitle]="modalTitle" [(nzVisible)]="modalShow"
          (nzOnCancel)="onModalCancel()" (nzOnOk)="onModalCancel()">

    <div *ngIf="tempType === '1'">
        <div style="margin-bottom: 10px">
            日期：
            <nz-date-picker [(ngModel)]="datePicker" (ngModelChange)="queryInfo($event)"></nz-date-picker>
        </div>
        <nz-table
            #groupingTable
            [nzData]="modalTableData"
            nzBordered
            nzSize="middle"
        >
            <thead>
            <tr>
                <th rowspan="2">名称</th>
                <th rowspan="2">警戒水位</th>
                <th rowspan="2">限定流量</th>
                <th colspan="2">4时</th>
                <th colspan="2">8时</th>
                <th colspan="2">12时</th>
                <th colspan="2">16时</th>
                <th colspan="2">20时</th>
                <th colspan="2">24时</th>
            </tr>
            <tr>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable.data">
                <td>{{ data.trName }}</td>
                <td>{{ data.wl }}</td>
                <td>{{ data.flow }}</td>
                <td>{{ data.wlFour }}</td>
                <td>{{ data.flowFour }}</td>
                <td>{{ data.wlEight }}</td>
                <td>{{ data.flowEight }}</td>
                <td>{{ data.wlTwelve }}</td>
                <td>{{ data.flowTwelve }}</td>
                <td>{{ data.wlSixteen }}</td>
                <td>{{ data.flowSixteen }}</td>
                <td>{{ data.wlTwenty }}</td>
                <td>{{ data.flowTwenty }}</td>
                <td>{{ data.wlTwentyFour }}</td>
                <td>{{ data.flowTwentyFour }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

    <div *ngIf="tempType === '2'">
        <div style="margin-bottom: 10px">
            <nz-range-picker [ngModel]="range" (ngModelChange)="onRangeChange($event)"></nz-range-picker>
            <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="quickTimeSelect" (ngModelChange)="quickSelect()"
                            style="margin-left: 15px">
                <label nz-radio-button nzValue="7">近7日</label>
                <label nz-radio-button nzValue="15">近15日</label>
                <label nz-radio-button nzValue="30">近30日</label>
            </nz-radio-group>
        </div>
        <nz-table #groupingTable1
                  [nzData]="irrHistoryData"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr>
                <th style="width: 140px;" rowspan="3">日期</th>
                <th *ngFor="let title of modalNestedHead" colspan="3">{{title}}</th>
            </tr>
            <tr>
                <ng-container *ngFor="let title of modalNestedHead">
                    <th colspan="2">开机数量（台）</th>
                    <th rowspan="2">开机流量（m³/s）</th>
                </ng-container>
            </tr>
            <tr>
                <ng-container *ngFor="let title of modalNestedHead">
                    <th>（大）</th>
                    <th>（小）</th>
                </ng-container>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable1.data" class="editable-row">
                <td>{{ data.time }}</td>
                <ng-container *ngFor="let item of data.wrsMuwWfDatas">
                    <td>{{ item.workNum }}</td>
                    <td>{{ item.workNumS }}</td>
                    <td>{{ item.workFlow }}</td>
                </ng-container>
            </tr>
            </tbody>
        </nz-table>
    </div>

</nz-modal>

<nz-modal nzClassName="custom-modal inlet-modal" nzWidth="1000" [(nzVisible)]="inletModalShow" [nzTitle]="inletModalTitle"
          (nzOnCancel)="inletModalShow = false" (nzOnOk)="inletSubmit()">
    <div style="display: flex">
        <nz-form-item nzFlex>
            <nz-form-label>日期</nz-form-label>
            <nz-form-control>
                <nz-date-picker [(ngModel)]="inletCurrDate" [nzDisabledDate]="disabledDate" [nzAllowClear]="false" (ngModelChange)="getInletDetailData()">
                </nz-date-picker>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nzFlex style="margin-left: 15px">
            <nz-form-label>时段</nz-form-label>
            <nz-form-control>
                <nz-select [(ngModel)]="hour" [nzPlaceHolder]="'时段'" (ngModelChange)="getInletDetailData()">
                    <nz-option nzValue="4" nzLabel="4h"></nz-option>
                    <nz-option nzValue="8" nzLabel="8h"></nz-option>
                    <nz-option nzValue="12" nzLabel="12h"></nz-option>
                    <nz-option nzValue="16" nzLabel="16h"></nz-option>
                    <nz-option nzValue="20" nzLabel="20h"></nz-option>
                    <nz-option nzValue="24" nzLabel="24h"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
    </div>
    <div style="display: flex;flex-wrap: wrap; width: 100%">
        <ng-container *ngFor="let formGroup of inletFormList">
            <form nz-form [formGroup]="formGroup.form" class="sub-form-content">
                <p>{{formGroup.name}}</p>
                <div nz-row [nzGutter]="10">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item>
                            <nz-form-label>水位(m)</nz-form-label>
                            <nz-form-control>
<!--                                <input nz-input placeholder="水位" formControlName="wl" [disabled]="formGroup.stadiaCode"-->
<!--                                  [readOnly]="formGroup.stadiaCode">-->
                                <input nz-input placeholder="水位" formControlName="wl">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="12">
                        <nz-form-item>
                            <nz-form-label>流量(m³/s)</nz-form-label>
                            <nz-form-control>
<!--                                <input nz-input placeholder="流量" formControlName="flow"-->
<!--                                  [disabled]="formGroup.stadiaCode" [readOnly]="formGroup.stadiaCode">-->
                                <input nz-input placeholder="流量" formControlName="flow">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
            </form>
        </ng-container>
    </div>
</nz-modal>
<nz-modal nzClassName="custom-modal inlet-modal" nzWidth="1000" [(nzVisible)]="inletModalShow1" nzTitle="日均流量填报"
          (nzOnCancel)="inletModalShow1 = false" (nzOnOk)="inletSubmit(1)">
    <div style="display: flex">
        <nz-form-item nzFlex>
            <nz-form-label>日期</nz-form-label>
            <nz-form-control>
                <nz-date-picker [(ngModel)]="inletCurrDate" [nzDisabledDate]="disabledDate" [nzAllowClear]="false" (ngModelChange)="getInletDetailData()">
                </nz-date-picker>
            </nz-form-control>
        </nz-form-item>
        <!-- <nz-form-item nzFlex style="margin-left: 15px">
            <nz-form-label>时段</nz-form-label>
            <nz-form-control>
                <nz-select [(ngModel)]="hour" [nzPlaceHolder]="'时段'" (ngModelChange)="getInletDetailData()">
                    <nz-option nzValue="4" nzLabel="4h"></nz-option>
                    <nz-option nzValue="8" nzLabel="8h"></nz-option>
                    <nz-option nzValue="12" nzLabel="12h"></nz-option>
                    <nz-option nzValue="16" nzLabel="16h"></nz-option>
                    <nz-option nzValue="20" nzLabel="20h"></nz-option>
                    <nz-option nzValue="24" nzLabel="24h"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item> -->
    </div>
    <div style="display: flex;flex-wrap: wrap; width: 100%">
        <ng-container *ngFor="let formGroup of inletFormList">
            <form nz-form [formGroup]="formGroup.form" class="sub-form-content">
                <p>{{formGroup.name}}</p>
                <div>
                    <nz-form-item>
                      <nz-form-label>日均流量(m³/s)</nz-form-label>
                      <nz-form-control>
<!--                        <input nz-input placeholder="日均流量" formControlName="flowAvg" [disabled]="formGroup.stadiaCode"-->
<!--                          [readOnly]="formGroup.stadiaCode">-->
                          <input nz-input placeholder="日均流量" formControlName="flowAvg">
                      </nz-form-control>
                    </nz-form-item>
                </div>
                <!-- <div nz-row [nzGutter]="10">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item>
                            <nz-form-label>水位(m)</nz-form-label>
                            <nz-form-control>
                                <input nz-input placeholder="水位" formControlName="wl" [disabled]="formGroup.stadiaCode"
                                  [readOnly]="formGroup.stadiaCode">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="12">
                        <nz-form-item>
                            <nz-form-label>流量(m³/s)</nz-form-label>
                            <nz-form-control>
                                <input nz-input placeholder="流量" formControlName="flow"
                                  [disabled]="formGroup.stadiaCode" [readOnly]="formGroup.stadiaCode">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div> -->
            </form>
        </ng-container>
    </div>
</nz-modal>
